/*
var chartData = [{
					lineOption:{color:"#000"},
					data:[	[0,1],
							[1,1],
							[2,3],
							[3,5],
							[4,6],
							[5,6]],
//					xTick:['A','B','C','D','E','F']
				},{
					lineOption:{color:"green"},
					data:[	[0,1],
							[1,2],
							[2,4],
							[3,7],
							[4,9],
							[5,9]],
//					xTick:['A','B','C','D','E','F']
				}];
*/
function BondMarketLineChart(container,cfg){
	this.$container=(typeof container)=="string" ? $("#"+container) : container;

	this.cfg={
//		w:this.$container.width()||400,
//		h:this.$container.height()||300,
		bgColor:"#EFEFEF",
		pointRadius:2,
		pointColor:"#000",
		underlineColor:"#999",
		lineColor:"#000"
	}
	$.extend(true,this.cfg,cfg);
	
	this.lang=QS_Lang.marketBond;
	
	this.dCanvas=document.createElement("canvas");
	this.$wrap = $('<div class="bmlc-wrap">'+
//						'<canvas class="bmlc-canvas"></canvas>'+
						'<div></div>'+
						'<div class="bmlc-xtick"></div>'+
						'<div class="bmlc-ytick"></div>'+
						'<div class="bmlc-datetext"></div>'+
					'</div>').appendTo(this.$container);
	this.$wrap.prepend(this.dCanvas);
	this.$canvas = $(this.dCanvas);
	this.$xTick = this.$wrap.find(".bmlc-xtick");
	this.$yTick = this.$wrap.find(".bmlc-ytick");
	this.$dateText = this.$wrap.find(".bmlc-datetext");
	
	if ($.browser.msie && parseFloat($.browser.version) < 9) {
		G_vmlCanvasManager.initElement(this.dCanvas); 
	}
	
	this.ctx = this.dCanvas.getContext('2d');
	
	this.$canvas.attr("width",this.cfg.w);
	
	this.$canvas.attr("height",this.cfg.h);
//	this.$container.css({width:this.cfg.width,height:this.cfg.height});
	
}
BondMarketLineChart.prototype={
	init:function(chartData){
		if(!chartData || !chartData.length)return;
		if(!chartData[0].data.length)return;
		this.chartData = chartData;
		//init canvas
//		document.createfragmentElement();

		this.drawChart(chartData);
		
		this.drawxTick(chartData);
		this.drawyTick(chartData);
		this.drawUnderline();
		this.drawPolyline();
	},
	
	drawChart:function(chartData){
		this.mmData = this.calcMaxMin(chartData);
		var w = this.cfg.w;
		var h = this.cfg.h;
		
		this.dist = {
			left:w * 0.03,
			right:w * 0.15,
			top:h * 0.1,
			bottom:30
		};

		this.dist.w = w - this.dist.left - this.dist.right;
		this.dist.h = h - this.dist.top - this.dist.bottom;
		this.dist.xDist = this.dist.w / this.mmData.xDiff;
		this.dist.yDist = this.dist.h / this.mmData.yDiff;
		
		for(var i = 0; i < chartData.length; i++){
			this.convertData(chartData[i]);
			this.drawCanvas(chartData[i]);
		}
		
	},
	calcMaxMin:function(chartData){
		var mmData = {};
		mmData.xMin = mmData.xMax = chartData[0].data[0][0];
		mmData.yMin = mmData.yMax = chartData[0].data[0][1];
		for(var k = 0 ; k < chartData.length; k++){
			var lineData = chartData[k].data;
			for(var i = 1; i < lineData.length; i++){
				var p = lineData[i];
				if(p[0] < mmData.xMin){
					mmData.xMin = p[0];
				}else if(p[0] > mmData.xMax){
					mmData.xMax = p[0];
				}
				
				if(p[1] < mmData.yMin){
					mmData.yMin = p[1];
				}else if(p[1] > mmData.yMax){
					mmData.yMax = p[1];
				}
			}
		}
		mmData.xDiff = mmData.xMax - mmData.xMin;
		mmData.yDiff = mmData.yMax - mmData.yMin;
		return mmData;
	},
	convertData:function(line){
		var xFirstPoint = this.mmData.xMin;
		var yFirstPoint = this.mmData.yMin;
		
		line.cData=[];
		for(var i = 0; i < line.data.length; i++){
			//x	
			line.cData[i]=[];
			line.cData[i][0] = this.dist.left + (line.data[i][0]-xFirstPoint)*this.dist.xDist;

			//y
			line.cData[i][1] = this.cfg.h - this.dist.bottom - (line.data[i][1]-yFirstPoint)*this.dist.yDist;
		}
	},
	
	drawCanvas:function(line){
	
//		this.ctx.fillStyle = this.cfg.bgColor;
//		this.ctx.fillRect (0, 0, this.cfg.w, this.cfg.h - this.dist.bottom);
		
		//line
		this.ctx.beginPath();
		for(var i = 0; i < line.cData.length; i++){
			var p = line.cData[i];
			if(i == 0){
				this.ctx.moveTo(p[0],p[1]);
			}else{
				this.ctx.lineTo(p[0],p[1]);
			}
		}
		this.ctx.strokeStyle = (line.lineOption&&line.lineOption.color)||this.cfg.lineColor;
		this.ctx.stroke();
		
		//circle
		for(var i = 0; i < line.cData.length; i++){
			var p = line.cData[i];
			this.ctx.beginPath();
			this.ctx.arc(p[0], p[1], this.cfg.pointRadius, 0,2*Math.PI, true);
			this.ctx.fillStyle = (line.lineOption&&line.lineOption.color)||this.cfg.pointColor;
			this.ctx.fill();
		}

	},
	drawxTick:function(chartData){
		this.$xTick.css({bottom:this.dist.bottom});
		this.$xTick.html('');
		for(var k = 0; k < chartData.length; k++){
			var line = chartData[k];
			if(!line.xTick)continue;
			for(var i = 0; i < line.data.length; i++){
				$('<span>'+line.xTick[i]/*||line.data[i][0]*/+'</span>').css({"left":line.cData[i][0]}).appendTo(this.$xTick);
			}
		}
//		this.xTickH=this.$xTick.children().height();
	},
	drawyTick:function(chartData){
//		this.$yTick.css({left:this.cfg.w - 20, bottom:this.dist.bottom});
		this.$yTick.html('');
		var yNum = 5;
		var yDist = this.dist.h / (yNum - 1);
		var yNumDist = this.mmData.yDiff / (yNum - 1);
		for(var i = 0; i < yNum; i++){
			$('<div>'+(this.mmData.yMin + yNumDist*i).toFixed(2)+'</div>').css({"bottom":yDist*i}).appendTo(this.$yTick);
		}
		this.$yTick.css({left:this.cfg.w - /*this.$yTick.children().last().width()*/25, bottom:this.dist.bottom});
	},
	drawUnderline:function(){
		this.ctx.beginPath();
		this.ctx.moveTo(0, this.cfg.h - this.dist.bottom);
		this.ctx.lineTo(this.cfg.w, this.cfg.h - this.dist.bottom);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
	},
	drawPolyline:function(){
//		this.ctx.save();
		var x = this.dist.left;
		var y = this.cfg.h - this.dist.bottom;
		var xDelta = 5;
		var yDelta = 12;//xTickHeight
		var h = 7;
//		this.lineWidth=1;
		this.ctx.beginPath();
		this.ctx.moveTo(x - xDelta, y + yDelta);
		this.ctx.lineTo(x - xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist + xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist + xDelta, y + yDelta);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
		
		var lang=this.lang;
		this.$dateText.html('');
		$('<span>'+lang['month']+'</span>').css({"left":x - xDelta,"top":y + yDelta + h}).appendTo(this.$dateText);
		
		x = this.dist.left + this.dist.xDist*2;
//		this.lineWidth=1;
		this.ctx.beginPath();
		this.ctx.moveTo(x - xDelta, y + yDelta);
		this.ctx.lineTo(x - xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist*3 + xDelta*3, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist*3 + xDelta*3, y + yDelta);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
		this.ctx.closePath();
		
		this.ctx.beginPath();
		this.ctx.fillRect (0, 0, 0, 0);//fix excanvas bug
		this.ctx.closePath();
//		this.ctx.restore();
		$('<span>'+lang['year']+'</span>').css({"left":x - xDelta,"top":y + yDelta + h}).appendTo(this.$dateText);
	},
	changeOutSize:function(w,h){
		this.cfg.w = w;
		this.cfg.h = h;
		this.$canvas.attr("width",this.cfg.w);
		this.$canvas.attr("height",this.cfg.h);
		this.init(this.chartData);
	}
	
}